// 全局用户数据数组
let userArr = []
// 登录注册的切换
function selectWay() {
    $('#userLogin .userLoginTop li').on('click', function () {
        if ($(this).index() == 0) {
            $('#userLogin .userLoginTop li').removeClass('active')
            $(this).addClass('active')
            let str1 = `
                        <!-- 中间输入框部分 -->
                        <form class="userMessage">
                            <input class="userName" type="text" name="userName" placeholder="用户名/邮箱/手机号码">
                            <label class="lableUserName"></label>
                            <input class="userPwd" type="password" name="userPassword" placeholder="密码">
                            <label class="lablePwd"></label>
                            <button class="loginBtn" type="submit">登录</button>
                            <div class="forgetPassword">
                                <span class="forget">忘记密码？</span>
                                <span class="phoneNumLogin">手机号登录</span>
                            </div>
                        </form>
                    `
            let str2 = `
                        <!-- 下方其他方式部分 -->
                        <div class="otherLogin">
                            <h2>其他方式登录</h2>
                            <ul class="otherLoginIcon">
                                <li>
                                    <img src="../static/images/Alipay.png" alt="">
                                </li>
                                <li>
                                    <img src="../static/images/WeChat.png" alt="">
                                </li>
                                <li>
                                    <img src="../static/images/qq.png" alt="">
                                </li>
                                <li>
                                    <img src="../static/images/weibo.png" alt="">
                                </li>
                            </ul>
                        </div>
                    `
            $('#userLogin .userMessage').replaceWith(str1)
            $('#userLogin .otherLogin').replaceWith(str2)
            getUserNamePwd()
        }
        if ($(this).index() == 1) {
            $('#userLogin .userLoginTop li').removeClass('active')
            $(this).addClass('active')
            let str1 = `
                        <!-- 中间输入框部分 -->
                        <form class="userMessage">
                            <input class="userName" type="text" name="userName" placeholder="用户名/邮箱/手机号码">
                            <label class="lableUserName"></label>
                            <input class="userPwd" type="password" name="userPassword" placeholder="密码">
                            <label class="lablePwd"></label>
                            <button class="loginBtn" type="submit">注册</button>
                            <div class="forgetPassword">
                                <span class="forget">收不到验证码？</span>
                            </div>
                        </form>
                    `
            let str2 = `
                        <!-- 下方其他方式部分 -->
                        <div class="otherLogin">
                            <h2>其他方式登录</h2>
                            <ul class="otherLoginIcon">
                                <li>
                                    <img src="../static/images/Alipay.png" alt="">
                                </li>
                                <li>
                                    <img src="../static/images/WeChat.png" alt="">
                                </li>
                                <li>
                                    <img src="../static/images/qq.png" alt="">
                                </li>
                                <li>
                                    <img src="../static/images/weibo.png" alt="">
                                </li>
                            </ul>
                        </div>
                    `
            $('#userLogin .userMessage').replaceWith(str1)
            $('#userLogin .otherLogin').replaceWith(str2)
            storageNamePwd()
        }
    })
}

// 判断用户名密码是否为空
function ValidationIsEmpty() {
    $('#userLogin .userMessage .loginBtn').on('click', function (e) {
        e.preventDefault()
        if ($('#userLogin .userMessage .userName').val() == '') {
            $('#userLogin .userMessage .lableUserName').html('用户名为空，请输入用户名！')
            if ($('#userLogin .userMessage .userPwd').val() == '') {
                $('#userLogin .userMessage .lablePwd').html('密码为空，请输入密码！')
            }
        }
    })
}

// 将注册的用户信息存储在localstorage中
function storageNamePwd() {
    //用户名正则，4到8位（字母）
    // let userNamePatt = /[a-zA-Z]{4,8}$/
    //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
    // let userPwdPatt = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

    // let name = $('#userLogin .userMessage .userName').val()
    // let pwd = $('#userLogin .userMessage .userPwd').val()

    $('#userLogin .userMessage .loginBtn').on('click', function (e) {
        e.preventDefault()
        let userPro = {
            headPortrait: '../static/images/headPic.png',
            userName: $('#userLogin .userMessage .userName').val(),
            userPwd: $('#userLogin .userMessage .userPwd').val(),
        }
        userArr.push(userPro)
        localStorage.setItem('userDataInformation', JSON.stringify(userArr))
        alert('用户注册成功，请返回登录界面！')
    })
}

// 登录界面获取存储的用户信息
function getUserNamePwd() {
    $('#userLogin .userMessage .loginBtn').on('click', function (e) {
        e.preventDefault()
        let userArrPro = JSON.parse(localStorage.getItem('userDataInformation'))
        if (($('#userLogin .userMessage .userName').val()).trim() == ''||($('#userLogin .userMessage .userName').val()).trim() == userArrPro[0].userName) {
            if (($('#userLogin .userMessage .userPwd').val()).trim() == ''||($('#userLogin .userMessage .userPwd').val()).trim() == userArrPro[0].userPwd) {
                alert('用户登录成功！')
                location.href = '../pages/index.html'
            } else {
                alert('用户密码不正确，请重新输入！')
            }
        } else {
            alert('用户账号不正确，请重新输入！')
        }
    })
}

// 各类方法的调用
selectWay()
ValidationIsEmpty()
getUserNamePwd()